import React, { useState } from 'react'
import { NoteList, NoteQueryParams, useNotes } from '../../../domain/note'
import { Panel } from '../../../base/components'
import { Divider, Skeleton } from 'antd'

const HomePage: React.FC = () => {
  const [searchParams, setSearchParams] = useState<NoteQueryParams>({
    isPublic: 1,
    page: 1,
    pageSize: 10,
    sort: 'create',
    order: 'desc',
  })

  const setSearchParamsHandle = (params: NoteQueryParams) => {
    setSearchParams((prev) => ({ ...prev, ...params }))
  }

  const {
    noteList,
    pagination,
    setNoteLikeStatusHandle,
    setNoteCollectStatusHandle,
    loading,
  } = useNotes(searchParams)
  return (
    <div className="flex justify-center">
      <div className="w-[1000px]">
        <Panel>
          <div className="text-sm font-semibold text-neutral-800">近期笔记</div>
          <Divider />
          <Skeleton loading={loading}>
            <NoteList
              noteList={noteList}
              pagination={pagination}
              queryParams={searchParams}
              setQueryParams={setSearchParamsHandle}
              setNoteLikeStatusHandle={setNoteLikeStatusHandle}
              setNoteCollectStatusHandle={setNoteCollectStatusHandle}
            ></NoteList>
          </Skeleton>
        </Panel>
      </div>
    </div>
  )
}

export default HomePage
